<template>
  <div class="home">
    <main>
      <router-view></router-view>
    </main>
    <footer>
      <router-link 
      v-for="item in foot" 
      :key="item.id"
      :to="`/home/${item.path}`"
      >
        {{item.meta.title}}
      </router-link>
    </footer>
  </div>
</template>

<script>


export default {
  name: 'Home',
  components: {
  },
  data(){
    return{
      foot:[{
            path: 'homaPage',
            name: 'HomaPage',
            component: () =>
                import ( /* webpackChunkName: "about" */ '../views/Home/HomaPage.vue'),
            meta: {
                title: '首页'
            }
        }, {
            path: 'classify',
            name: 'Classify',
            component: () =>
                import ( /* webpackChunkName: "about" */ '../views/Home/Classify.vue'),
            meta: {
                title: '分类'
            }
        }, {
            path: 'surprise',
            name: 'Surprise',
            component: () =>
                import ( /* webpackChunkName: "about" */ '../views/Home/Surprise.vue'),
            meta: {
                title: '京喜'
            }
        }, {
            path: 'shopCar',
            name: 'ShopCar',
            component: () =>
                import ( /* webpackChunkName: "about" */ '../views/Home/ShopCar.vue'),
            meta: {
                title: '购物车'
            }
        }, {
            path: 'mypage',
            name: 'Mypage',
            component: () =>
                import ( /* webpackChunkName: "about" */ '../views/Home/Mypage.vue'),
            meta: {
                title: '我的'
            }
        }]
    }
  }
}
</script>
<style lang='scss'>
  *{
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
  }
  a{
    text-decoration: none;
  }
  html,body,#app,.home{
    width: 100%;
    height: 100%;
  }
  .home{
    display: flex;
    flex-direction: column;
    main{
      flex: 1;
      overflow-y: scroll;
    }
    footer{
      width: 100%;
      height: 50px;
      background: #eee;
      box-shadow: 0 -6px 10px #ccc;
      display: flex;
      justify-content: space-around;
      align-items: center;
      a{
        color: #333;
      }
      .router-link-active{
        color: red;
      }
    }
  }
</style>